class Tab {
  constructor() {
    this.doms = {
      tabadd: document.querySelector(".tabadd"),
      ul: document.querySelector(".fisrstnav ul"),
      tabscon: document.querySelector(".tabscon"),
    };
    // 初始化
    this.init();
  }
  init() {
    // 事件监听
    this.eventListener();
    this.getAllLis();
  }
  // 事件绑定
  eventListener() {
    this.doms.tabadd.onclick = () => {
      console.log(111);
      this.addTab();
    };
    this.doms.ul.addEventListener("click", (e) => {
      // 给li绑定单击事件
      if (e.target.tagName === "LI") {
        // console.log(e.target.dataset.id);
        const index = e.target.dataset.id;
        this.changeTab(index);
      }
      // 给关闭按钮绑定单击事件
      if (e.target.classList.contains("icon-guanbi")) {
        const index = e.target.dataset.id;
        // console.log(index);
        this.removeTab(index);
      }
    });
    // 给li绑定双击事件
    this.doms.ul.addEventListener("dblclick", (e) => {
      if (e.target.tagName === "LI") {
        const index = e.target.dataset.id;
        this.editalTab(index);
      }
    });
    // 给section绑定双击事件
    this.doms.tabscon.addEventListener("dblclick", (e) => {
      if (e.target.tagName === "SECTION") {
        const index = e.target.dataset.id;
        // console.log(index);
        this.editalCon(index);
      }
    });
  }

  // 清除类名函数
  clear() {
    const res = this.getAllLis();
    const lis = res[1];
    const sections = res[2];
    // 将所有的li元素集合的长度设为当前创建的li元素的索引
    const index = res[0];
    // console.log(lis);清除li和section类名
    for (let k = 0; k < lis.length; k++) {
      lis[k].className = "";
      sections[k].className = "";
    }
    return index;
  }

  // 获取所有tab栏元素
  getAllLis() {
    const lis = this.doms.ul.querySelectorAll("li");
    const sections = this.doms.tabscon.querySelectorAll("section");
    const length = lis.length;
    return [length, lis, sections];
  }

  // 添加tab栏元素
  addTab() {
    // 先清除所有类名
    const index = this.clear();
    // 创建新的li元素
    const li = document.createElement("li");
    li.className = "liactive";
    // 将所有的li元素集合的长度设为当前创建的li元素的索引存储到自定义属性身上
    li.dataset.id = index;
    li.innerHTML = `<span>试测</span><span data-id="${index}" class="iconfont icon-guanbi"></span>`;
    // 追加到ul中
    this.doms.ul.appendChild(li);
    // 创建section元素
    const section = document.createElement("section");
    section.className = "conactive";
    section.innerHTML = "测试";
    section.dataset.id = index;
    // 追加到tab栏内容中
    this.doms.tabscon.appendChild(section);
    // 更新li的数量
    const res = this.getAllLis();
    length = res[0];
    if (length >= 8) {
      this.doms.tabadd.onclick = null;
    } else {
      this.doms.tabadd.onclick = () => {
        this.addTab();
      };
    }
  }

  // 切换tab栏元素
  changeTab(index) {
    // 派他思想，清除类名
    this.clear();
    const res = this.getAllLis();
    const lis = res[1];
    const sections = res[2];
    // 给对应的li和section显示
    lis[index].className = "liactive";
    sections[index].className = "conactive";
  }

  // 删除tab栏元素
  removeTab(index) {
    // 先获取所有的li元素，限制删除个数
    let res = this.getAllLis();
    let lis = res[1];

    if (lis.length === 1) return;

    // 删除对应的tab元素和内容元素
    const tabfather = this.doms.ul;
    tabfather.removeChild(tabfather.children[index]);
    const confather = this.doms.tabscon;
    confather.removeChild(confather.children[index]);
    // 删除完li，又要重新获取
    res = this.getAllLis();
    lis = res[1];
    const sections = res[2];
    // 重新定义自定义属性
    for (let k = 0; k < lis.length; k++) {
      lis[k].dataset.id = k;
      lis[k].querySelector(".icon-guanbi").dataset.id = k;
      sections[k].dataset.id = k;
    }

    // 显示删除前的一个li元素,前题是前面的任何元素都没有显示类名
    if (!this.doms.ul.querySelector(".liactive")) {
      const last = lis.length - 1;
      lis[last].className = "liactive";
      sections[last].className = "conactive";
    }
  }

  // tab栏元素编辑
  editalTab(index) {
    // 阻止双击选中文字
    window.getSelection
      ? window.getSelection().removeAllRanges()
      : document.selection.empty();
    const lis = this.doms.ul.querySelectorAll("li");
    // console.log(index);
    // console.log(lis[index].children[0]);
    // 提前将span中的文本保存，方便放到input框里
    const con = lis[index].children[0].innerHTML;
    lis[index].children[0].innerHTML = `<input type="text" value=${con}>`;
    // 需要先获取input元素
    let input = lis[index].querySelector("input");
    input.select(); //让文本框中的文字处于选中状态

    // input绑定失去焦点事件
    input.addEventListener("blur", function () {
      lis[index].children[0].innerHTML = this.value;
      input = null;
    });
  }

  // 内容元素编辑
  editalCon(index) {
    // 阻止双击选中文字
    window.getSelection
      ? window.getSelection().removeAllRanges()
      : document.selection.empty();
    const sections = this.doms.tabscon.querySelectorAll("section");
    // console.log(index);
    // console.log(sections[index].children[0]);
    // 提前将section中的文本保存，方便放到input框里
    const con = sections[index].innerHTML;
    sections[index].innerHTML = `<input type="text" value=${con}>`;
    // 需要先获取input元素
    let input = sections[index].querySelector("input");
    input.select(); //让文本框中的文字处于选中状态

    // input绑定失去焦点事件
    input.addEventListener("blur", function () {
      sections[index].innerHTML = this.value;
      input = null;
    });
  }
}

const tab = new Tab();
